<template>
 <div>
  <div class="dabox">
 <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item
  v-for="(item,index) in gteimg"
  :key="index">
  <img :src="item" alt="">
  </van-swipe-item>
</van-swipe>
</div>
<van-grid>
  <van-grid-item icon="home-o" text="整租" />
  <van-grid-item icon="friends-o" text="合租" />
  <van-grid-item icon="location-o" text="地图找房" />
  <van-grid-item icon="wap-home-o" text="去出租" />
</van-grid>
 <div class="zhufan"><p>租房小组</p><p class="gen">更多</p></div>
<van-grid gutter="10px" direction="horizontal" :column-num="2">
  <van-grid-item icon="photo-o" text="家住回龙观归属的感觉" />
  <van-grid-item icon="photo-o" text="宜居四五环大都市生活" />
  <van-grid-item icon="photo-o" text="喧嚣三里屯繁华的背后" />
  <van-grid-item icon="photo-o" text="比邻十号线地铁心连心" />
</van-grid>
<searchFor/>
 </div>
</template>
<script>
import searchFor from '../components/searchFor.vue'
import { gteImg } from '../api/article'
export default {
  components: {
    searchFor

  },
  data () {
    return {
      gteimg: []
    }
  },
  async created () {
    const res = await gteImg()
    // console.log(res)
    res.body.forEach(item => {
      this.gteimg.push(`http://liufusong.top:8080${item.imgSrc}`)
    })
  }
}
</script>

<style lang="less" scoped>
 .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
     height: 212px;
    text-align: center;
    background-color: #39a9ed;
  }

  img {
    width: 375px;
    height: 212px;
  }
  .zhufan {
    display: flex;
    text-align: center;
    justify-content:space-between;
    padding:0 10px;
  }
  .gen {
    font-size: 14px;
    color:rgba(120,125,130) ;
  }

</style>
